<script setup>
import { User, Lock } from '@element-plus/icons-vue'
import { useLoginStore } from '@/stores'
import { storeToRefs } from 'pinia';
const loginStore = useLoginStore()
const { userInfo, rules, userFromRef} = storeToRefs(loginStore)
</script>
<template>
    <div class="wapper">
        <div
            style="margin: 100px auto; background-color: antiquewhite; width: 500px;height: 480px; padding: 20px; border-radius: 10px;">
            <div style="margin: 15px 0; text-align: center; font-size: 24px;"><strong>注册[注意这是注册]</strong></div>
            <el-form :rules="rules" :model="userInfo" ref="userFromRef">
                <el-form-item prop="nickname">
                    <el-input size="large" placeholder="请输入昵称" v-model="userInfo.nickname" :prefix-icon="User"
                        style=" margin: 10px 0 10px 30px; width: 400px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="username">
                    <el-input size="large" placeholder="请输入用户名" v-model="userInfo.username" :prefix-icon="User"
                        style=" margin: 10px 0 10px 30px; width: 400px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                    <el-input size="large" placeholder="请输入密码" v-model="userInfo.password" :prefix-icon="Lock" show-password
                        style=" margin: 10px 0 10px 30px; width: 400px;" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="confirmPassword">
                    <el-input size="large" placeholder="请确认密码" v-model="userInfo.confirmPassword" :prefix-icon="Lock" show-password
                        style=" margin: 10px 0 10px 30px; width: 400px;" autocomplete="off" @keyup.enter="loginStore.submitForm(userFromRef,false)"></el-input>
                </el-form-item>

                <div style="margin: 40px 0; text-align: center;">
                    <el-button type="success" autocomplete="off" @click="loginStore.submitForm(userFromRef,false)">注册</el-button>
                    <el-button type="primary" autocomplete="off" @click="$router.push('/login')">返回登录</el-button>
                </div>
            </el-form>
        </div>
    </div>
</template>
<style scoped>
.wapper {
    height: 100vh;
    background-image: linear-gradient(to bottom right, rgb(200, 150, 250), rgb(64, 158, 255));
    overflow: hidden;
}
</style>